<template>
  <div class="" style="height: 100%">
    <div
      :style="{
        height: getscalepxc(14),
        paddingLeft: getscalepxc(14),
        marginTop: getscalepxc(5),
      }"
    >
      <btnlist :btlist="btnlist" @btnclick="btnclick"> </btnlist>
    </div>
    <beijingdatatable
      :header="header"
      :datalist="datalist"
      :style="{
        height: `calc(100% - ${getscalepxc(19)})`,
      }"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";
import qs from 'qs';

export default {
  name: "zhongyaotable",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      btnlist: [
        {
          name: "重要监测点",
        },
        {
          name: "小室数据",
        },
      ],
      type: '重要监测点'
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.loadData();
  },
  methods: {
    btnclick(type) {
      console.log(type);
      this.type = type;
      this.loadData();
    },
    getLevelStyle(level) {
      let color = "";
      switch (level) {
        case "一级":
          color = "#E4847A";
          break;
        case "二级":
          color = "#EDAF33";
          break;
        case "三级":
          color = "#E4E26A";
          break;
      }
      return color;
    },
    loadData() {
      let unitcolor = "#56C5FA";
      let aaa = [];
      if (this.type === '重要监测点') {
        this.header = [
          {
            name: `监测点名称`,
            flex: 2,
          },
          {
            name: `供温<br/><span style="color: ${unitcolor};">(℃)</span>`,
            flex: 2,
          },
          {
            name: `回温<br/><span style="color: ${unitcolor};">(℃)</span>`,
            flex: 2,
          },
          {
            name: `供压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
            flex: 2,
          },
          {
            name: `回压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
            flex: 2,
          },
        ];
        this.pids = [];
        this.nameList = [];
        axios.get('/bigScreen/bigScreen').then(res => {
          console.log('热力站')
          console.log(res)
          let data = res.data.filter(v => v.attrName === 'monitor_pids')[0].attrValue.split(',');
          data.forEach(v => {
            this.pids.push(v.split('@@')[1])
            this.nameList.push({
              pid: v.split('@@')[1],
              name: v.split('@@')[2]
            })
          })
          let formdata = new FormData()
          formdata.append('search', `&pid in (${this.pids.join(',')})`)
           axios.post('/model/substationMonitor?&pageSize=300&pageNum=1', formdata).then(rs => {
            this.tableData = rs.data;
            this.nameList.forEach((v, i) => {
              this.tableData.forEach(v2 => {
                if (v.pid == v2.pid) {
                  this.nameList[i]['m_001t'] = `<span style="color: #ACCAD5;position: relative;">${v2['m_001t']}</span>`;
                  this.nameList[i]['m_002t'] = `<span style="color: #ACCAD5;position: relative;">${v2['m_002t']}</span>`;
                  this.nameList[i]['m_001p'] = `<span style="color: #ACCAD5;position: relative;">${v2['m_001p']}</span>`;
                  this.nameList[i]['m_002p'] = `<span style="color: #ACCAD5;position: relative;">${v2['m_002p']}</span>`;
                }
              })
              if (!('m_001t' in this.nameList[i])) {
                this.nameList[i]['m_001t'] = `<span style="color: #ACCAD5;position: relative;">--</span>`;
                this.nameList[i]['m_002t'] = `<span style="color: #ACCAD5;position: relative;">--</span>`;
                this.nameList[i]['m_001p'] = `<span style="color: #ACCAD5;position: relative;">--</span>`;
                this.nameList[i]['m_002p'] = `<span style="color: #ACCAD5;position: relative;">--</span>`;
              }
            })
            aaa = this.nameList.map(v => Object.values(v).splice(1))
            this.datalist = Object.values(aaa);
          })
        })
      } else {
        this.header = [
          {
            name: `小室名称`,
            flex: 2,
          },
          {
            name: `供水压力<br/><span style="color: ${unitcolor};">(Mpa)</span>`,
            flex: 2,
          },
          {
            name: `供回压差<br/><span style="color: ${unitcolor};">(MPa)</span>`,
            flex: 2,
          },
          {
            name: `电池剩余电量<br/><span style="color: ${unitcolor};">(%)</span>`,
            flex: 2,
          },
        ];
        let queryJson = {
          queries: [
            {
              metric: "pid,name,m_007p,m_006p,m_008p,m_001elec, m_006p_time",
              limit: 30,
              offset: 0,
              schema: "monitor"
            }
          ],
          search: "",
          searchName: "",
          foundColumn: "location",
          orderBy: "m_006p_time asc",
          prefix: "manage",
          table: "MeasuredPoint",
          type: "lastest"
        };
        axios.post("/open/queryDb", queryJson).then(res => {
          let rs = res.data;
          rs.forEach(r => {
            aaa.push({
              name: `<span style="color: #ACCAD5;position: relative;">${r.name}</span>`,
              m_006p: `<span style="color: #ACCAD5;position: relative;">${r.m_006p}</span>`,
              m_008p: `<span style="color: #ACCAD5;position: relative;">${r.m_008p}</span>`,
              m_001elec: `<span style="color: #ACCAD5;position: relative;">${r.m_001elec || '--'}</span>`,
            })
            this.datalist = Object.values(aaa);
          })
        })
      }
    }
  },
};
</script>
<style lang='scss'>
</style>